<template>
  <div>
    <div class="gz-nav">
      <van-tabs v-model="activeName">
        <template #nav-left
          ><div class="iconfont icon-arrow-left-bold" @click.stop="$router.go(-1)"></div
        ></template>
        <template #nav-right
          ><div class="iconfont icon-31sousuo"></div
        ></template>
        <van-tab title="推荐" name="a">推荐</van-tab>
        <van-tab title="关注" name="b">
          <ul>
            <li v-for="(item,index) in gzList" :key="index">
              <div class="img">
                  <img :src="item.avatarUrl" alt="">
              </div>
              <div class="name">{{item.nickname}}</div>
            </li>
          </ul>
        </van-tab>
        <van-tab title="粉丝" name="c">
             <ul>
            <li v-for="(item,index) in fsList" :key="index+'fs'">
              <div class="img">
                  <img :src="item.avatarUrl" alt="">
              </div>
              <div class="name">{{item.nickname}}</div>
            </li>
          </ul>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import {getGzList,getFS} from "../api/user"
export default {
  data() {
    return {
      activeName: "b",
      gzList:null,
      fsList:null
    };
  },
  created(){
       let uid=window.localStorage.getItem('uid')
    getGzList({
      uid
    }).then(data=>{
      if(data.code==200){
          this.gzList=data.follow
          console.log(this.gzList)
      }
    })
    getFS({
        uid
    }).then(data=>{
        this.fsList=data.followeds
    })
  }
};
</script>

<style lang="less">
.gz-nav {
  // display: flex;
  .iconfont {
    line-height: 44px;
    font-size: 24px;
  }
  ul{
      li{
          display: flex;
          margin: 20px;
          align-items: center;
          .img{
              width: 50px;
              height: 50px;
              border-radius: 50%;
              overflow: hidden;
              margin-right: 10px;
              img{
                  width: 100%;
                  height: 100%;
              }
          }
          .name{
              color: rgb(48, 43, 43);
          }
      }
  }
}
</style>